<script setup lang='ts'>
import { propObj } from "./props";

defineOptions({
  name: 'VtSkeleton',
})

defineProps(propObj)

</script>

<template>
  <div class='vt-skeleton__container'>
    <div v-if="$slots.template && loading" class="vt-skeleton-templete__warpper">
      <slot name="template" v-for="i in count" :key="i"></slot>
    </div>

    <template v-else-if="!$slots.template && loading">
      <vt-skeleton-item variant="p" class="vt-skeleton__first"></vt-skeleton-item>
      <vt-skeleton-item class="vt-skeleton__paragraph" variant="p" v-for="(item, index) in rows - 1"
        :key="index"></vt-skeleton-item>
      <vt-skeleton-item class="vt-skeleton__last vt-skeleton__paragraph"></vt-skeleton-item>
    </template>

    <slot v-else></slot>

  </div>
</template>

<style scoped lang=' scss'></style>